<template>
  <!-- 专家咨询总页面 -->
  <div id="app1">
    <!-- 抬头 -->
    <div class="title-zhuanjia">按岗位找专家</div>
    <nav>
      <!-- 职业选择部分 -->
      <!-- 跳转页面的路径根据项目路由写 -->
      <!-- 跳转到不同页面career_x.vue -->
      <router-link to="/careerPage">web</router-link> |
      <router-link to="/career_2">java</router-link> |
      <router-link to="/career_3">it</router-link>

    </nav>

    <!-- 页面跳转部分 -->
    <router-view/>
  </div>
</template>
<script>
export default {
  name:'zhuanjia',
  mounted(){
    this.$router.push('/zhuanjia')
  }
}
</script>
<style>
#app1 {
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 20px;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.title-zhuanjia{
  /* font-weight: bolder; */
  font-size: 35px;
  position: relative;
  padding-left: 14px;
  text-align: left;

}
.title-zhuanjia::before{
  position: absolute; /*绝对定位*/
  top: 50%; /*Y轴方向偏移自身高度的50%*/
  transform: translatey(-40%); /*Y轴方向偏移微调*/
  left: 0; /*紧靠容器左边缘*/
  content: ''; /*伪元素需要有内容才能显示*/
  width: 5px; /*伪元素宽度*/
  height: 35px; /*伪元素高度*/
  background-color: #dca8f5; /*伪元素颜色*/
}
nav {
  box-shadow: 0px 2px 20px #ccc;
  /* margin: 0 auto; */
  margin-top: 30px;
  margin-bottom: 30px;
  width: 100%;
  /* padding: 30px; */
  padding: 30px 0;
  background-color: rgb(249, 253, 255);
}

nav a {
  padding: 30px;
  text-decoration: none;
  font-weight: bold;
  color: #2c3e50;
}
nav a:hover{
  text-shadow: 1px 1px 2px rgb(197, 197, 197);
  /* background-color: cornflowerblue; */
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
